<template>
  <div id="app">
    <el-row>
      <el-col :span="span">
        <el-form
          v-if="apiModule"
          class="form"
          ref="form"
          :rules="rules"
          :model="config"
          label-width="100px"
          label-position="right"
        >
          <el-form-item label="json:" prop="json">
            <el-upload
              :http-request="httpRequest"
              :on-remove="fileReove"
              :file-list="fileList"
              action="#"
              :limit="1"
              accept=".json"
            >
              <el-button type="success" size="mini">上传 json</el-button>
            </el-upload>
          </el-form-item>
          <el-form-item label="requestName:" prop="requestName">
            <el-input v-model="config.requestName"></el-input>
          </el-form-item>
          <el-form-item label="apiPrefix:">
            <el-input v-model="config.apiPrefix"></el-input>
          </el-form-item>
          <el-form-item label="importPath:" prop="importPath">
            <el-input v-model="config.importPath"></el-input>
          </el-form-item>
          <el-form-item label="modelLabel:">
            <el-select v-model="config.modelLabel" style="width: 100%">
              <el-option label="是" :value="true"></el-option>
              <el-option label="否" :value="false"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <el-select
          v-model="selectValue"
          filterable
          v-if="!apiModule && data.modelLabel"
          style="width: 100%; margin-bottom: 20px"
        >
          <el-option
            v-for="(key, index) in Object.keys(model)"
            :key="index"
            :label="key"
            :value="key"
          ></el-option>
        </el-select>
        <div class="submit">
          <el-button type="primary" @click="make">提 交</el-button>
          <el-button type="success" @click="swithModule">切 换</el-button>
        </div>
        <div class="list" v-if="apiModule">
          <el-collapse accordion>
            <el-collapse-item
              :title="name"
              :name="name"
              v-for="(name, index) in Object.keys(data)"
              :key="index"
            >
              <div v-if="name === 'api'">
                <div
                  class="item"
                  :class="active === item ? 'active' : ''"
                  v-for="(item, i) in Object.keys(data.api)"
                  :key="i"
                  @click="keyClick('api', item)"
                >
                  {{ item }}
                </div>
              </div>
              <div
                class="item"
                :class="active === name ? 'active' : ''"
                v-else
                @click="keyClick(name, name)"
              >
                {{ name }}
              </div>
            </el-collapse-item>
          </el-collapse>
        </div>
      </el-col>
      <el-col :span="24 - span">
        <el-button type="primary" v-show="false" size="mini" @click="copy">{{
          copeid ? "已复制" : "复制"
        }}</el-button>
        <pre
          v-if="apiModule"
          class="line-numbers api"
        ><code v-html="result"></code></pre>
        <pre v-else class="line-numbers api vue"><code>{{ result }}</code></pre>
      </el-col>
    </el-row>
  </div>
</template>

<script>
const Service = require("./app/service");
console.log("Service", Service);
const Prism = window.Prism || {};
export default {
  name: "App",
  data() {
    return {
      fileList: [],
      model: {},
      selectValue: "",
      apiModule: true,
      timeout: null,
      copeid: false,
      span: 6,
      config: {
        json: null,
        requestName: "request",
        apiPrefix: "",
        importPath: `import request from '@/utils/request'`,
        modelLabel: false,
      },
      data: {},
      result: "",
      active: "",
      rules: {
        json: [
          { required: true, message: "请上传swagger.json", trigger: "blur" },
        ],
        requestName: [
          { required: true, message: "请填写请求函数", trigger: "blur" },
        ],
        importPath: [
          {
            required: true,
            message: "请填写导入请求函数语句",
            trigger: "blur",
          },
        ],
      },
    };
  },
  mounted() {},
  methods: {
    swithModule() {
      if (this.data.modelLabel == null) {
        this.$message.warning("请设置modelLabel为true, 提交后再切换");
        return;
      }
      this.result = ''
      this.apiModule = !this.apiModule;
      if (!this.apiModule) {
        try {
          this.model = eval("(" + this.data.modelLabel + ")");
        } catch (err) {
          console.log(err);
          this.model = {};
        }
      }
    },
    selectChange(key) {
      try {
        let value = this.model[key];
        this.result = Service.makeForm(value);
      } catch (err) {
        this.message.error("解析失败");
      }
    },
    httpRequest(data) {
      this.$refs.form.clearValidate();
      let reader = new FileReader();
      reader.readAsText(data.file);
      this.fileList = [data.file]
      reader.onload = (e) => {
        this.config.json = JSON.parse(e.target.result);
      };
    },
    fileReove() {
      this.config.json = null;
      this.fileList = []
    },
    make() {
      if (this.apiModule) {
        this.$refs.form.validate(async (valid) => {
          if (valid) {
            try {
              let data = await Service.service(this.config);
              this.data = data;
            } catch (err) {
              console.error(err);
              this.$message.error(err);
            }
          }
        });
      } else {
        this.selectChange(this.selectValue);
      }
    },

    keyClick(key1, key2) {
      this.active = key2;
      let result = "";
      if (key1 === key2) {
        result = this.data[key1] || "";
      } else {
        result = this.data[key1][key2] || "";
      }
      this.code = result;
      this.result = Prism.highlight(
        result,
        Prism.languages.javascript,
        "javascript"
      );
    },
    copy() {},
  },
};
</script>

<style lang="less" scoped>
#app {
  min-width: 1800px;
  overflow: hidden;
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  .submit {
    padding-bottom: 20px;
    .el-button {
      width: 48.8%;
    }
  }
  /deep/ .el-upload {
    width: 100%;
    .el-button {
      width: 100%;
    }
  }
  /deep/ .el-upload-list {
    .el-upload-list__item {
      text-align: left;
    }
  }
  .list {
    height: 500px;
    border: 1px #ccc dashed;
    /deep/ .el-collapse-item__header {
      padding-left: 10px;
    }
    .item {
      text-align: left;
      padding: 10px 25px;
      cursor: pointer;
      border-bottom: 1px #f0f0f0 dashed;
    }
    .active {
      background: #67c04b;
      color: #fff;
    }
    overflow-y: scroll;
  }
  pre {
    text-align: left;
    padding: 20px;
    padding-left: 40px;
    background: #282c33;
    color: #ccc;
    border-top: 4px solid #67c04b;
    counter-reset: line;
    white-space: pre-wrap;
    word-break: break-all;
    span {
      display: block;
      line-height: 1.5rem;
    }
    /deep/ span.token {
      background: none;
    }
  }

  .api {
    font-size: 14px;
    height: calc(92.5vh - 4px);
    margin: 0;
    margin-left: 20px;
    overflow-y: scroll;
    code {
      span {
        text-align: left;
      }
    }
  }
  .vue {
    color: #67c04b;
  }
}
</style>
